<template>
	<view class="userInfoPopup">
		<view class="title" :style="{'height': navHeight+statusBarHeight + 'px'}"><text class="iconfont iconhuaban73"
				@tap="$emit('close')"></text>
			<view :style="{'height': navHeight+statusBarHeight + 'px'}"></view>
		</view>
		<cl-filter-bar @change="onChange()">
			<view :class="{'active':active===1}" class="cl-filter-item" @tap="active=1">
				<text>客户资料</text>
			</view>
			<view :class="{'active':active===2}" class="cl-filter-item" @tap="active=2">
				<text>客户订单</text>
			</view>
			<view :class="{'active':active===3}" class="cl-filter-item" @tap="active=3">
				<text>客户足迹</text>
			</view>
		</cl-filter-bar>
		<view class="infoBox" v-show="active===1">
			<view class="row-1">客户信息</view>
			<view class="row-2">
				<text class="sp1">姓名</text>
				<text class="sp2">{{ userInfoData.nickname }}</text>
			</view>
			<view class="row-2">
				<text class="sp1">职业</text>
				<text class="sp2">{{ userInfoData.profession }}</text>
			</view>
			<view class="row-2">
				<text class="sp1">生日</text>
				<text class="sp2">{{ userInfoData.birth }}</text>
			</view>
			<view class="row-2">
				<text class="sp1">是否需要金融服务</text>
				<text class="sp2">{{ userInfoData.is_need_financial }}</text>
			</view>
			<view class="row-2">
				<text class="sp1">加入创客时间</text>
				<text class="sp2">{{ userInfoData.join_promoter }}</text>
			</view>
			<view class="row-1">客户档案</view>
			<view class="row-2">
				<text class="sp1">房屋面积</text>
				<text class="sp2">{{ userInfoData.floor_space }}</text>
			</view>
			<view class="row-2">
				<text class="sp1">房屋类型</text>
				<text class="sp2">{{ userInfoData.house_type }}</text>
			</view>
			<view class="row-2">
				<text class="sp1">房屋状态</text>
				<text class="sp2">{{ userInfoData.house_status }}</text>
			</view>
			<view class="row-2">
				<text class="sp1">装修预算</text>
				<text class="sp2">{{ userInfoData.decorate_budget }}</text>
			</view>
			<view class="row-2">
				<text class="sp1">装修风格偏好</text>
				<text class="sp2">{{ userInfoData.decorate_style }}</text>
			</view>
			<view class="row-2">
				<text class="sp1">家具风格偏好</text>
				<text class="sp2">{{ userInfoData.Household_style }}</text>
			</view>
			<view class="row-1">联系方式</view>
			<view class="row-2">
				<text class="sp1">电话</text>
				<text class="sp2">{{ userInfoData.mobile }}</text>
			</view>
			<view class="row-2">
				<text class="sp1">新房地址</text>
				<text class="sp2">{{ userInfoData.estate_address }}</text>
			</view>
			<view class="row-1">备注</view>
			<textarea v-model="text" :placeholder="userInfoData.remark"></textarea>
			<view class="btn" @click="upRemark">更新备注</view>
		</view>
		<scroll-view scroll-y="true" v-show="active===3">
			<view class="logsBox">
				<view class="row" v-for="(item,index,key) in productLogs" :key="key">
					<image class="pl" :src="item.main_imgurl"></image>
					<view class="pr">
						<view class="p1">{{item.store_name}}</view>
						<view class="p2">{{item.product_title}}</view>
						<view class="p3">¥ {{item.price}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" v-show="active===2" class="orderBox" @scrolltolower="scrolltolower">
			<uni-collapse>
				<uni-collapse-item :title="item.product_lst[0].product_title" v-for="(item,index,key) in ConsumerOrder"
					:key="index">
					<view class="row-2"><text class="sp1">商品链接</text><text
							class="sp2">{{item.product_lst[0].main_imgurl}}</text></view>
					<view class="row-2"><text class="sp1">订单号</text><text class="sp2">{{item.order_code}}</text></view>
					<view class="row-2"><text class="sp1">下单时间</text><text
							class="sp2">{{formatDate(item.create_time)}}</text></view>
					<view class="row-2"><text class="sp1">收货地址</text><text
							class="sp2">{{item.province}}{{item.city}}{{item.area}}{{item.address}}</text>
						<icon @click="changeAds(item,index)" type="info" size="24" />
					</view>
					<view class="row-2"><text class="sp1">订单总价</text><text
							class="sp2">{{item.price}}（含：邮费{{item.move_price}}元）</text></view>
					<view class="row-2"><text class="sp1">优惠劵</text><text
							class="sp2">{{item.product_lst[0].main_imgurl}}</text></view>
					<view class="row-2"><text class="sp1"></text><text
							class="sp2">{{item.product_lst[0].main_imgurl}}</text></view>
					<view class="row-2"><text class="sp1">买家留言</text><text class="sp2">{{item.remark}}</text></view>
					<view class="row-3">
						<button
							type="primary">{{item.order_status==1?'待付款':item.order_status==2?'待发货':item.order_status==3?'待收货':item.order_status==4?'已完成':'已关闭'}}</button>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</scroll-view>
		<u-popup v-model="addressShow" mode="center" width="100%" height="50%" class="adsBox">
			<view class="city df-bt">
				<text class="txt">省份</text>
				<view class="city-input df-bt" @click="select1(1)">
					<input type="text" v-model="list.province" disabled class="title-input" placeholder="请选择省份"
						placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8" />
					<text class="iconfont icon-jinru"></text>
				</view>
			</view>
			<view class="city df-bt">
				<text class="txt">城市</text>
				<view class="city-input df-bt" @click="select2(2)">
					<input type="text" v-model="list.city" disabled class="title-input" placeholder="请选择城市"
						placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8" />
					<text class="iconfont icon-jinru"></text>
				</view>
			</view>
			<view class="city df-bt">
				<text class="txt">县区</text>
				<view class="city-input df-bt" @click="select3(3)">
					<input type="text" v-model="list.district" disabled class="title-input" placeholder="请选择县区"
						placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8" />
					<text class="iconfont icon-jinru"></text>
				</view>
			</view>
			<view class="city df-bt">
				<text class="txt">详细地址</text>
				<view class="city-input df-bt">
					<input type="text" v-model="list.address" class="title-input" placeholder="请输入详细地址"
						placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8" />
					<text class="iconfont icon-jinru"></text>
				</view>
			</view>
			<button type="primary" style="margin: 0 30rpx;" @click="changeAddress">确 定</button>
		</u-popup>
		<u-picker mode="selector" v-model="select_show" @confirm="selectConfirm" :range="selectList"
			range-key="city_name" :default-selector="[0]"></u-picker>
	</view>
</template>

<script>
	import customeApi from '@/service/custome.js'
	import clFilterBar from "../components/cl-uni/components/cl-filter-bar/cl-filter-bar.vue"
	import clFilterItem from "../components/cl-uni/components/cl-filter-item/cl-filter-item.vue"
	import uniCollapse from "./uni-collapse/uni-collapse.vue"
	import uniCollapseItem from "./uni-collapse/uni-collapse-item.vue"
	export default {

		components: {
			clFilterBar,
			clFilterItem,
			uniCollapse,
			uniCollapseItem
		},
		props: ['chat_id'],
		data() {
			return {
				list: {},
				addressShow: false,
				select_show: false,
				address: '',
				selectList: [],
				userInfoData: {},
				productLogs: [],
				orderData: [],
				ConsumerOrder: [],
				text: '',
				active: 1,
				page: 1,
				pagesize: 20,
				noMore: 10,
				order_id: '',
				username: '',
				mobile: '',
				dataIndex:''
			}
		},
		computed: {
			navHeight() {
				return this.$store.state.system.navBarHeight
			}, // Nav栏高度
			statusBarHeight() {
				let systemInfo = uni.getSystemInfoSync()
				return systemInfo.statusBarHeight || 0
			}
		},
		mounted() {
			this.getUserInfo();
			this.getproductLogs();
			this.getProvice();
			this.getConsumerOrder();
		},
		methods: {
			changeAds(val,index) {
				this.order_id = val.id;
				this.username = val.username;
				this.mobile = val.mobile;
				this.dataIndex=index;
				this.addressShow = true;
			},

			changeAddress() {
				customeApi.editAdress({
					order_id: this.order_id,
					name: this.username,
					mobile: this.mobile,
					province: this.list.province,
					city: this.list.city,
					area: this.list.district,
					address: this.list.address
				}).then(res => {
					if (res.code === 1) {
						this.ConsumerOrder[this.dataIndex].province=this.list.province;
						this.ConsumerOrder[this.dataIndex].city=this.list.city;
						this.ConsumerOrder[this.dataIndex].area=this.list.district;
						this.ConsumerOrder[this.dataIndex].address=this.list.address;
						this.addressShow = false;
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 选择1
			select1(e) {
				this.getProvice()
				this.selectType = e
				this.select_show = true
				// this.city1 = e.detail.value;
			},
			// 选择2
			select2(e) {
				if (!this.province_id || !this.list.province) {
					uni.showToast({
						title: '请先选择省份',
						icon: 'none'
					})
					return
				}
				this.getCity()
				this.selectType = e
				this.select_show = true
				// this.city1 = e.detail.value;
			},
			// 选择3
			select3(e) {
				if (!this.city_id || !this.list.city) {
					uni.showToast({
						title: '请先选择城市',
						icon: 'none'
					})
					return
				}
				this.getDistrict()
				this.selectType = e
				this.select_show = true
				// this.city1 = e.detail.value;
			},
			// 选择4
			select4(e) {
				if (!this.district_id || !this.list.district) {
					uni.showToast({
						title: '请先选择县区',
						icon: 'none'
					})
					return
				}
				console.log(this.list)
				this.getStreet()
				this.selectType = e
				this.select_show = true
				// this.city1 = e.detail.value;
			},
			// 选择后确定
			selectConfirm(e) {
				let index = e[0]
				if (this.selectType == 1) {
					this.list.province = this.selectList[index].city_name
					this.province_id = this.selectList[index].cityid
					this.list.city = ''
					this.list.district = ''
					this.list.street = ''
					this.city_id = null
					this.district_id = null
					this.street_id = null
				} else if (this.selectType == 2) {
					this.list.city = this.selectList[index].city_name
					this.city_id = this.selectList[index].cityid
					this.list.district = ''
					this.list.street = ''
					this.district_id = null
					this.street_id = null
				} else if (this.selectType == 3) {
					this.list.district = this.selectList[index].city_name
					this.district_id = this.selectList[index].cityid
					this.list.street = ''
					this.street_id = null
				} else {
					this.list.street = this.selectList[index].city_name ? this.selectList[index].city_name : ''
					this.street_id = this.selectList[index].cityid ? this.selectList[index].cityid : 0
				}
			},
			scrolltolower() {
				if (this.noMore) {
					return false;
				}
				this.page++
				this.getConsumerOrder(true);

			},
			formatDate(timestamp) {
				let date = new Date(timestamp)
				let y = date.getFullYear(); //年
				let m = date.getMonth() + 1
				m = m < 10 ? ('0' + m) : m
				let d = date.getDate()
				d = d < 10 ? ('0' + d) : d
				let hour = date.getHours();
				let minutes = date.getMinutes();
				minutes = minutes < 10 ? ('0' + minutes) : minutes
				let s = date.getSeconds()
				s = s < 10 ? ('0' + s) : s
				const time = `${y}-${m}-${d} ${hour}:${minutes}:${s}`
				return time
			},
			// 获取省份列表
			getProvice() {
				this.$api.getProviceList().then(res => {
					console.log(res, '省份列表')
					if (res.code == 1) {
						this.selectList = res.data ? res.data : []
					}
				})
			},
			// 获取城市
			getCity() {
				this.$api.getCityList({
					province_id: this.province_id
				}).then(res => {
					console.log(res, '城市列表')
					if (res.code == 1) {
						this.selectList = res.data ? res.data : []
					}
				})
			},
			// 获取县区
			getDistrict() {
				this.$api.getDistrictList({
					city_id: this.city_id
				}).then(res => {
					console.log(res, '县区列表')
					if (res.code == 1) {
						this.selectList = res.data ? res.data : []
					}
				})
			},
			// 获取街道
			getStreet() {
				this.$api.getStreetList({
					district_id: this.district_id
				}).then(res => {
					console.log(res, '街道列表')
					if (res.code == 1) {
						this.selectList = res.data ? res.data : []
					}
				})
			},
			getUserInfo() {
				customeApi.userInfo({
					chat_id: this.chat_id
				}).then(res => {
					if (res.code === 1) {
						this.userInfoData = res.data
					} else {
						this.$utils.showErr({
							title: res.msg
						})
					}
				})
			},
			getConsumerOrder(paging) {
				if (!paging) {
					this.page = 1
				}
				customeApi.consumerOrder({
					chat_id: this.chat_id,
					page: this.page,
					pagesize: this.pagesize
				}).then(res => {
					if (res.code === 1) {
						if (this.page * this.pagesize >= res.data.count) {
							this.noMore = true;
						} else {
							this.noMore = false;
						}
						if (paging) {
							res.data.data.map(item => {
								this.ConsumerOrder.push(item)
							})
						} else {
							this.ConsumerOrder = res.data.data
						}
					} else {
						this.$utils.showErr({
							title: res.msg
						})
					}
				})
			},
			getproductLogs() {
				customeApi.productLogs({
					chat_id: this.chat_id
				}).then(res => {
					if (res.code === 1) {
						this.productLogs = res.data
					} else {
						this.$utils.showErr({
							title: res.msg
						})
					}
				})
			},
			upRemark() {
				customeApi.upRemark({
					chat_id: this.chat_id,
					remark: this.text,
				}).then(res => {
					if (res.code === 1) {
						this.$utils.showErr({
							title: '更新成功'
						})
					} else {
						this.$utils.showErr({
							title: res.msg
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.userInfoPopup {
		background: #F9FAFC;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		.adsBox{
			border-radius: 10rpx;
		}

		.city {
			padding: 0 30rpx;
			margin-bottom: 40rpx;

			.txt {
				width: 30%;
			}

			.city-input {
				width: 90%;

				.title-input {
					// text-align: right;
					margin-right: 20rpx;
				}
			}

			.icon-jinru {
				color: #D8D8D8;
				font-size: 26rpx;
			}

		}

		.orderBox {
			.row-2 {
				height: 60rpx;
				padding: 0 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.sp1 {
					width: 150rpx
				}

				.sp2 {
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.row-3 {

				margin: 20rpx 30rpx;
			}
		}

		.title {
			display: flex;
			width: 100%;
			height: 88rpx;
			background: #F6F7FB;
			align-items: center;

			.iconhuaban73 {
				font-size: 36rpx;
				color: #333333;
				padding: 0 20rpx;
			}
		}

		scroll-view {
			margin-top: 20rpx;
			width: 100%;
			flex: 1;
			overflow: hidden;

		}

		.logsBox {
			padding: 0 20rpx;

			.row {
				margin-bottom: 20rpx;
				height: 160rpx;

				.pl {
					float: left;
					border-radius: 8rpx;
					width: 160rpx;
					height: 160rpx;
				}

				.pr {
					height: 160rpx;
					margin-left: 20rpx;
					float: left;

					.p1 {
						font-size: 30rpx;
					}

					.p2 {
						margin: 10rpx;
						font-size: 24rpx;
					}

					.p3 {
						font-size: 24rpx;
						color: red;
					}
				}
			}

		}

		.infoBox {
			color: #333333;
			padding: 0 20rpx;

			textarea {
				padding: 0 15rpx;
				font-size: 24rpx;
				line-height: 30rpx;
				width: 100%;
				height: 90rpx;
				outline: none;
				border-radius: 6rpx;
				border: none;
				resize: none;
				background: #F5F5F5;
			}

			.btn {
				margin: 20rpx auto;
				cursor: pointer;
				width: 300rpx;
				line-height: 60rpx;
				text-align: center;
				font-size: 24rpx;
				color: #fff;
				border-radius: 6rpx;
				background: #00D552;
			}

			.row-1 {
				line-height: 60rpx;
				font-size: 30rpx;
			}

			.row-2 {
				height: 45rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;

				.sp1 {
					margin-left: 10rpx;
					width: 300rpx;
				}
			}
		}
	}
</style>
